<template>
    <Header v-if="isShowHeader" title="楼盘一页纸" left-arrow @click-left="back" />
    <div v-else class="van-safe-area-top" />
    <div class="page-content">
        <div class="body">
            <div class="bg-box"></div>
            <div class="content">
                <div class="base-info">
                    <div class="base-info-left">
                        <div class="name">
                            {{ premiseInfo?.name }}
                        </div>
                        <div class="address">
                            <img src="@/assets/img/address.png" />
                            <span>{{ premiseInfo?.address }}</span>
                        </div>
                    </div>
                    <div v-show="premiseInfo?.buildingLevel" class="level-pop">
                        <Popover v-model:show="showPopover" theme="dark" placement="bottom-end">
                            <div class="level-desc">
                                基于楼盘的房价、地理位置、楼层、租金、物业费、入住率、覆盖人数等维度进行打分评级。
                                该楼盘得分：{{ premiseInfo?.score }}分（最高100分）
                            </div>
                            <template #reference>
                                <img class="level" :src="getImgUrl(premiseInfo?.buildingLevel || '')" />
                            </template>
                        </Popover>
                    </div>
                </div>
                <div class="tag-box">
                    <div v-for="(tag, index) in tags" :key="index + 'tag'" class="bi-tag">
                        {{ tag }}
                    </div>
                </div>
                <SelectionUnit v-if="premiseInfo?.labelCode === 'D0066-02' && premiseInfo?.unitRecapInfos?.length" :unit-list="premiseInfo?.unitRecapInfos" />
                <BaseInfo :info="premiseInfo" />
                <CrowdInfo :premise-id="premiseId" />
                <Calculator v-if="premiseInfo?.labelCode === 'D0066-02'" :info="premiseInfo" />
                <LaunchIndustry v-if="isShowTopTrade && topTradeData.length" :list="topTradeData" />
                <LaunchCase v-if="isShowTopTrade && topTradeData.length" :premise-id="premiseId" :list="topTradeData" :trade-code="tradeCode" />
            </div>
        </div>
        <div class="van-safe-area-bottom" />
    </div>
</template>

<script lang="ts" name="onePage" setup>
import { ref, onMounted } from 'vue';
import Header from '@/components/Header/index.vue';
import BaseInfo from './BaseInfo.vue';
import LaunchIndustry from './LaunchIndustry.vue';
import CrowdInfo from './CrowdInfo.vue';
import Calculator from './Calculator.vue';
import LaunchCase from './LaunchCase.vue';
import SelectionUnit from './SelectionUnit.vue';
import { Popover } from 'vant';
import { useRoute } from 'vue-router';
import { getPremiseInfo, getTopTrade } from '@/api/onePage';
import { LaunchRankItem, PremisesInfoModel } from './onePage.module';
import { ListItem } from './components/Ranking.vue';
import { clearLoading, showLoading } from '@/api';
import { store } from '@/store';

const showPopover = ref(false);
const premiseInfo = ref<PremisesInfoModel>();
const tags = ref<string[]>();
const premiseId = ref('');
const route = useRoute();
const isShowHeader = ref(true);
const isShowTopTrade = ref(false);
const topTradeData = ref<ListItem[]>([]);
const tradeCode = ref('');

// 返回
const back = () => {
    console.log('back-click');
};

const getImgUrl = (level: string) => {
    return new URL(`../../assets/img/build-level-${level}.png`, import.meta.url).href;
};

// 获取行业排名
const getTopTradeData = async ()=>{
    if(premiseInfo.value?.resourceOwners?.includes(1)){
        isShowTopTrade.value = true;
        const res = await getTopTrade(premiseId.value);
        topTradeData.value = res.launchRankList?.map((item: LaunchRankItem) =>{
            return{
                name: item.tradeName,
                value: Math.floor(Number(item.rate)*10000)/100,
                code: item.tradeCode
            };
        });
        if(topTradeData.value.length){
            tradeCode.value = res.launchRankList[0].tradeCode || '';
        }
    }
};

const initData = async ()=>{
    // 获取楼盘信息
    tags.value = [];
    showLoading();
    let res;
    try {
        res = await getPremiseInfo(premiseId.value);
    } catch (e) {
        console.error(e);
        return;
    } finally {
        clearLoading();
    }
    premiseInfo.value = res;
    tags.value?.push(`${premiseInfo.value.buildingsNum|| '-'}栋楼`);
    tags.value?.push(`${premiseInfo.value.unitNum|| '-'}个单元`);
    tags.value?.push(`${premiseInfo.value.elevatorsNum|| '-'}部电梯`);
    premiseInfo.value?.labelCode === 'D0066-02' && tags.value?.push(`${premiseInfo.value.coveredHouseholdNum|| '-'}户家庭`);
    tags.value?.push(`${premiseInfo.value.coveredPeopleNum|| '-'}人`);
    try {
        await getTopTradeData();
    } catch (e) {
        console.error(e);
        return;
    } finally {
        clearLoading();
    }
};

onMounted(async()=>{
    if(store.state.app.productCode !== 'D-CRM'){
        store.commit('app/setShowBackHomeBtn', false);
    }
    const { buildingId, token, source } = route.query;
    console.log(token);
    premiseId.value = buildingId as string;
    source === 'cgz' && (isShowHeader.value = false);
    if(premiseId.value){
        await initData();
    }
});
</script>

<style lang="scss" scoped>
.page-content {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}

.body {
    flex: 1;
    position: relative;
    z-index: 0;
    padding: 0 12px 12px;

    .bg-box {
        width: 100%;
        height: 134px;
        background-image: url("@/assets/img/bg.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .content {
        position: relative;
        z-index: 1;
    }

    .base-info {
        position: relative;
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
        min-height: 55px;

        &-left {
            color: #fff;
            flex: 1;
            padding-right: 58px;
            width: 0;

            .name {
                font-family: PingFangSC-SNaNpxibold, sans-serif;
                font-weight: 600;
                font-size: 22px;
                height: 30px;
                color: #ffffff;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
                white-space: nowrap;
            }

            .address {
                margin-top: 5px;
                font-family: PingFangSC-Regular, sans-serif;
                font-weight: 400;
                font-size: 14px;
                color: #ffffff;
                display: flex;
                align-items: center;
                span {
                    opacity: 0.79;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100%;
                    white-space: nowrap;
                }

                img {
                    width: 11.97px;
                    height: 13.95px;
                    margin-right: 6px;
                }
            }
        }

        .level-pop {
            position: absolute;
            top: 6px;
            right: 2px;
            .level {
                width: 50px;
                height: 43px;
            }
        }
    }

    .tag-box {
        margin-top: 6px;
        min-height: 23px;
    }

    .bi-tag {
        height: 16px;
        line-height: 16px;
        background: #ffffff;
        border-radius: 2px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        font-size: 10px;
        color: #e60044;
        padding: 1px 6px;
        display: inline-block;
        margin-top: 6px;

        &:not(:last-child) {
            margin-right: 6px;
        }
    }
}

.level-desc {
    max-width: 200px;
    padding: 10px;
    font-family: PingFangSC-Regular, sans-serif;
    font-weight: 400;
    font-size: 12px;
}
</style>
